<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:thSys="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" th:href="${#maps.containsKey(options,'ico_logo') == false ? '/static/img/favicon.ico' : options['ico_logo'] }"/>
    <link rel="stylesheet" type="text/css" href="/plugins/vali/css/main.css">
    <link rel="stylesheet" type="text/css" href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/plugins/toast/jquery.toast.css">
  	<title thSys:text="'用户注册'"></title>
  </head>
  <body>
    <section class="material-half-bg">
      <div class="cover"></div>
    </section>
    <section class="login-content">
      <div class="logo">
        <h1>课设博客</h1>
      </div>
      <div class="login-box" style="min-height: 520px;">
        <form class="login-form">
         <h3 class="login-head"><i class="fa fa-lg fa-fw fa-user-plus"></i>注册</h3>
          <div class="form-group">
            <input class="form-control" id="userName" type="text" name="userName" placeholder="用户名" autofocus>
          </div>
          <div class="form-group">
            <input class="form-control" id="userPwd" type="password" name="userPwd" placeholder="密码">
          </div>
          <div class="form-group">
            <input class="form-control" id="confirmPwd" type="password" name="confirmPwd" placeholder="确认密码">
          </div>
          <div class="form-group">
            <input class="form-control" id="userEmail" type="text" name="userEmail" placeholder="邮箱">
          </div>
          <div class="form-group">
            <input class="form-control" id="userDisplayName" type="text" name="userDisplayName" placeholder="显示名称">
          </div>
          <div class="form-group btn-container">
            <button class="btn btn-outline-primary btn-block" id="btn_register" type="button" onclick="register()">注册</button>
          </div>
          <div class="form-group text-center">
            <p>已有账号？<a href="/user/login">立即登录</a></p>
          </div>
        </form>
      </div>
    </section>
  <div th:replace="admin/module/macros :: comm" ></div>
  <script type="text/javascript">
  //回车事件
  $("#confirmPwd").keyup(function(event){
	  if(event.keyCode ==13){
	    register();
	  }
  });
  
  function register() {
      var userName = $("#userName").val();
      var userPwd = $("#userPwd").val();
      var confirmPwd = $("#confirmPwd").val();
      var userEmail = $("#userEmail").val();
      var userDisplayName = $("#userDisplayName").val();
      
      // 验证表单
      if (!userName) {
        showMsg("请输入用户名", "error", 1000);
        return;
      }
      if (!userPwd) {
        showMsg("请输入密码", "error", 1000);
        return;
      }
      if (!confirmPwd) {
        showMsg("请确认密码", "error", 1000);
        return;
      }
      if (userPwd !== confirmPwd) {
        showMsg("两次密码不一致", "error", 1000);
        return;
      }
      if (!userEmail) {
        showMsg("请输入邮箱", "error", 1000);
        return;
      }
      if (!userDisplayName) {
        showMsg("请输入显示名称", "error", 1000);
        return;
      }
      
      loadingText("btn_register", "注册中...");
      $.ajax({
          type: "post",
          url: "/user/register",
          dataType: "json",
          async: false,
          data: {
            userName: userName,
            userPwd: userPwd,
            userEmail: userEmail,
            userDisplayName: userDisplayName
          },
          success: function(data) {
            if (data.flag == true) {
              $.toast({
                  text: data.msg,
                  heading: '提示',
                  icon: 'success',
                  showHideTransition: 'fade',
                  allowToastClose: true,
                  hideAfter: 1000,
                  stack: 1,
                  position: 'top-center',
                  textAlign: 'left',
                  loader: true,
                  loaderBg: '#ffffff',
                  afterHidden: function() {
                    window.location.href = "/user/login";
                  }
              });
            } else {
              loadingBack("btn_register", "注册");
              showMsg(data.msg, "error", 3000);
            }
          },
          error: function(data) {
            loadingBack("btn_register", "注册");
            showMsg("注册失败", "error", 3000);
          }
      });
  }
  </script>
  </body>
</html>
